import React, { useState, useRef} from 'react';
import ReactDOM from 'react-dom';


function App(props: any) {
  const nRef = React.useRef(0);

  /** 如果使用useState,那么先点击延时定时器,再setState改变state,这个log打印的永远是改变前的(如果你不使用setState(x=>x+1)这样函数式更新的形式的话)*/

  /** 或则你可以使用useRef↓*/
  /*
    useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
    useRef返回一个可变的ref对象，它的.current属性被初始化为传递的参数(initialValue)。
    返回的对象将在组件的整个生命周期中可用(其它的,像state,每次渲染都不是一样的(即使值一样,但也不是同一个))。

    useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.
    useRef()不仅对ref属性有用。它可以方便地保持任何可变的值，类似于在类中使用实例字段的方式。
  */
  const log = () => setTimeout(() => console.log(`n: ${nRef.current}`), 1500);

  /** ,但useRef有一个问题不会自动触发更新，我们可以使用比较hack的方法*/
  const update = React.useState<any>(null)[1]; //← 类似于类组件的this.forceUpdate()了

  /** 这就是vue3的核心理念 抄了了hook和useRef */
  return (
    <div className='App'>
      <p>{nRef.current}</p>
      {/*<button onClick={() => (nRef.current += 1)}>+1</button>*/}
      <button onClick={() => {
        nRef.current += 1;
        update(nRef.current);
      }}>+1
      </button>
      <button onClick={log}>log</button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
